<template>
    <div class="bookbox">
        <div v-show="!loadingxs"> 
            <mytop></mytop>
            <div class="boxtitle">
                <div class="boxleft">
                    <img :src="this.$store.state.book.bookimg" alt="">
                </div>
                <div class="boxright">
                    <div class="mingzi">{{this.$store.state.book.booktitle}}</div>
                    <div class="zuozhe">作者: <span>{{this.$store.state.book.bookpeople}}</span> <div class="shutiao"></div> <span>{{this.$store.state.book.booklx}}</span></div>
                    <div class="leixin">
                        <div v-for="item in this.$store.state.book.booktag" :key="item">{{item}}</div>
                    </div> 
                    <div class="dianji"><span>{{this.$store.state.book.bookzs}}</span> <span>{{this.$store.state.book.bookdjsl}}点击</span> </div>
                    <div class="qian">{{this.$store.state.book.bookqian}}点/千字</div>
                </div>
            </div>
            <div class="xq" :style="jj" @click="changejj">
                {{this.$store.state.book.bookjj}}
            </div>
            <div class="zj" @click="quzj">
                <div class="zjleft">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shuji"></use>
                    </svg>
                    <span>共{{this.$store.state.book.bookzjsl}}章</span>
                </div>
                <div class="zjright">
                    <span :style="{color:this.$store.state.book.bookwj=='已完结'?'#eb8948':'green'}">{{this.$store.state.book.bookwj}}</span>
                    <span>›</span>
                </div>
            </div>
            <div class="pinlun">
                <div class="pltitle">评论</div>
                <div class="xiepl">写评论</div>
            </div>
            <ul class="pl">
                <li v-for="(item,index) in plarr" :key="index">
                    <div class="pltop">
                        <div class="plimg">
                            <img :src="item.avatar" alt="" v-if="item.avatar!=='' && item.avatar!=='images/avatar/default/1.png' && item.avatar!==undefined">
                            <div class="dtimg" v-if="item.avatar=='images/avatar/default/1.png'">未知</div>
                            <div class="dtimg" v-if="item.avatar==undefined">未知</div>
                            <div class="dtimg" v-if="item.avatar==''">未知</div>
                        </div>
                        <div class="plp">{{item.nickName}}
                            <span v-if="item.self==1">作者</span>
                        </div>
                    </div>
                    <div class="plcontent">
                        {{item.comment}}
                        
                        <div class="plhuifu" v-if="item.replyList !== undefined">
                            <div class="huifu" v-for="it in item.replyList" :key="it.time">
                                <span>{{it.nickName}}</span>回复<span>{{it.toNickName}}</span>: <p class="hfnr">{{it.comment}}</p>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="meiyou" v-show="plarr.length==0">暂时还没有评论~</li>
                <li class="more" v-show="plarr.length>=1">
                    更多评论
                </li>
            </ul>
            <div class="downc">
                <div class="downleft" @click="jiaru">加入书架</div>
                <div class="downright"  @click="kan">免费试读</div>
            </div>
        </div>
        <loading class="jiazai" v-show="loadingxs"></loading>
        <div class="yy" v-show="yiyou">
            已经加入书籍了哦~
        </div>
        <div class="yy" v-show="chenggong">
            加入成功~
        </div>
    </div>
</template>
<script>
import mytop from '../small/mytop.vue'
import loading from '../small/loading.vue'
export default {
    name:'book',
    created(){
        this.$store.commit('changenavshow', false)
        this.getdata()
        // 创建组件的时候回到最开始的地方
        document.documentElement.scrollTop = 0
        document.body.scrollTop = 0
    },
    components:{
        mytop,
        loading
    },
    data(){
        return {
            jj:` -webkit-line-clamp:3;
                            -webkit-box-orient: vertical;
                            overflow: hidden`,
            jjxs:false,
            plarr:[],
            tii:null,
            yiyou:false,
            chenggong:false,
            title:'',
            loadingnum:0,
            loadingxs:true,
            id:''
        }
    },
    methods:{
        getdata(){
            var id = ''
            axios.get(`https://apis.netstart.cn/yunyuedu/book/getsub.json?id=${this.$store.state.book.bookid}&title=${this.$store.state.book.booktitle}`).then(
                res=>{
                    // console.log(res)
                    let data = res.data.feed.entry
                    let obj = {}
                    obj.bookimg = data.link[1].href
                    obj.bookid = data.id
                    id = data.id
                    this.id = data.id
                    obj.booktitle = data.title
                    this.title = data.title
                    obj.bookpeople = data.author.name
                    if(data['pris:book'].keyname != undefined){
                        obj.booktag = data['pris:book'].keyname.split(',').slice(0,3)
                    }
                    obj.bookjj = data.summary
                    let num = Number(data['pris:book'].words)
                    num = num>10000?Math.round(num/10000)+"万字":num+"字"
                    obj.bookzs = num
                    obj.bookqian = data['pris:book'].wprice
                    obj.bookwj = data['pris:book'].integrity==1?'已完结':"连载中"
                    obj.bookzj = ''
                    obj.bookzjnr = ''
                    obj.bookzjsl = data['pris:book'].totalArticleCount[0]
                    obj.booklastyime = data.updated
                    obj.bookdjsl  =  data['pris:subscribe'].clicksCount
                    obj.booklx = data['pris:book'].category
                    this.$store.dispatch("book/setbook", obj);

                    axios.get(`https://apis.netstart.cn/yunyuedu/comment/getComments.json?bookId=${id}`).then(
                        res=>{
                            // console.log(res)
                            let arr = res.data.all.list.slice(0,5)
                            this.plarr = arr
                            
                            axios.get(`https://apis.netstart.cn/yunyuedu/reader/book/info.json?source_uuid=${id}`).then(
                                res=>{
                                    this.$store.dispatch("bookdetail/setbookallzj", res.data.data.catalog);
                                    
                                    let aaa = this.$store.state.book.booklist
                                    if(aaa[0] !== undefined ){
                                        this.lishijilu(aaa,id)
                                    }
                                    this.loadingxs = false
                                },
                                err=>{
                                    console.log(err)
                                }
                            )
                        },
                        err=>{
                            console.log(err)
                        }
                    )
                },
                err=>{
                    console.log(err)
                }
            )
        },
        // 最开始进来的时候看有没历史记录
        lishijilu(arr,value){
            var ab = 0
            var ng = 0
            for(let i = 0;i<arr.length;i++){
                if(value == arr[i].id){
                    ab += 1
                    ng = i
                }
            }
            if(ab == 1){
                this.$store.commit("bookdetail/changebooknowzj",arr[ng].zj)
                this.$store.commit("bookdetail/changebooknowys",arr[ng].ys)
            }
        },
        changejj(){
            if(!this.jjxs){
                this.jj = ` -webkit-line-clamp:3;
                            -webkit-box-orient: vertical;
                            overflow: hidden;`
            }else{
                this.jj = ""
            }
            this.jjxs=!this.jjxs
        },
        kan(){
            this.$router.push("/bookdetail")
        },
        quzj(){
            this.$router.push("/zhangjie")
        },
        jiaru(){
            let obj = {}
            obj.id = this.id 
            obj.zj = 0
            obj.ys = 0
            obj.title = this.title
            if(this.$store.state.book.booklist[0] !== undefined){
                var pd = 0
                let arr = this.$store.state.book.booklist
                for(let i = 0;i<arr.length;i++){
                    if(obj.id == arr[i].id){
                        pd += 1
                    }
                }
                // 有一样的
                if(pd == 1){
                    this.yijinyou()
                }else{
                    this.cgl()
                    arr.push(obj)
                }
                this.$store.commit('book/changebooklist',arr)
            }else{
                let arr = []
                this.cgl()
                arr.push(obj)
                this.$store.commit('book/changebooklist',arr)
            }
        },
        yijinyou(){
            this.yiyou = true
            this.tii = setTimeout(()=>{
                this.yiyou = false
                clearTimeout(this.tii)
                this.tii = null
            },2000)
        },
        cgl(){
            this.chenggong = true
            this.tii = setTimeout(()=>{
                this.chenggong = false
                clearTimeout(this.tii)
                this.tii = null
            },2000)
        },
        
    }
}
</script>
<style lang="less">
@import '../other/all.less';
.bookbox{
  &::-webkit-scrollbar { width: 0 !important }
    width: 100%;
    font-size: 0.4rem;
    position: relative;
    .boxtitle{
        width: 90%;
        margin:60px auto 20px;
        display:flex;
        justify-content: space-between;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        .boxleft{
            width: 35%;
            // margin-right:20px;
            img{
                width: 100%;
            }
        }
    }
}
.boxright{
    width: 60%;
    text-align: left;
    .mingzi{
        font-size:0.6rem;
        margin-bottom: 10px;
    }
    .leixin{
        width: 100%;
        display:flex;
        justify-content: left;
        margin-bottom: 10px;
        div{
            font-size: 0.2rem;
            padding:2px 5px;
            margin-right: 10px;
            border-radius: 8px;
            color:@allcolor1;
            border:1px solid @allcolor1;
            // cursor: pointer;
        }
    }
    .zuozhe{
        margin-bottom: 10px;
        color:@allcolor1;
        .shutiao{
            display:inline-block;
            width: 2px;
            height:0.3rem;
            background-color: @allcolor1;
        }
        span{
            display: inline-block;
            margin-left: 10px;
        }
        span:first-child{
            color:@allcolor2;
            margin-right: 10px;
            margin-left: 0px;
        }
    }
    .dianji{
        color:@allcolor5;
        font-size: 0.35rem;
        span:first-child{
            display:inline-block;
            margin-right: 10px;
        }
    }
    .qian{
        color:@allcolor5;
        font-size: 0.36rem;
        margin-top: 10px;
    }
}
.xq{
    width: 90%;
    margin: 0 auto;
    display: -webkit-box;
    color:@allcolor5;
    transition: all 0.5s linear;
    text-align: left;
}
.zj{
    width: 90%;
    margin: 20px auto 10px;
    display: flex;
    justify-content: space-between;
    border-top:1px solid #eee;
    border-bottom:1px solid #eee;
    padding:5px 0px ;
    // height:1rem;
    line-height:0.7rem;
    .zjleft{
        display: flex;
        svg{
            font-size: 0.6rem;
            margin-right: 10px;
            margin-top:2px;
            color:@allcolor5;
        }
        span{
            display:inline-block;
            color:@allcolor5;
            line-height: 0.8rem;
        }
    }
    .zjright{
        span:nth-child(1){
            display:inline-block;
            margin-right:10px;
        }
        span:nth-child(2){
            font-size: 0.6rem;
            color:@allcolor1;
        }
    }
}
.pinlun{
    display:flex;
    justify-content: space-between;
    width: 90%;
    margin: 20px auto ;
    .pltitle{
        color:@allcolor5;
        font-size: 0.6rem;
        // font-weight: 600
        position: relative;
        margin-left:10px;
        &::before{
            content:'';
            width: 2px;
            height:20px;
            background-color: @allcolor2;
            position: absolute;
            top: 5px;
            left:-10px;
        }
    }
    .xiepl{
        padding: 3px;
        border:1px solid @allcolor1;
        color:@allcolor1;
    }
}
.pl{
    width: 90%;
    margin: 30px auto;
    padding-bottom: 30px;
    
    li{
        width: 100%;
        margin-bottom: 30px;
        .pltop{
            width: 100%;
            display:flex;
            // height:1.35rem;
            .plimg{
                width: 13%;
                font-size: 0px;
                overflow: hidden;
                border-radius: 50%;
                margin-right:10px;
                img{
                    width: 100%;
                }
            }
            .plp{
                color:@allcolor5;
                font-size: 0.45rem;
                span{
                    display:inline-block;
                    // padding:2px;
                    font-size: 0.3rem;
                    color:white;
                    background-color: @allcolor2;
                    border-radius: 3px;
                }
            }
        }
        .plcontent{
            width: 82%;
            margin-left:18%;
            text-align: left;
            margin-top: -10px;
            font-size: 0.4rem;
            // color:@allcolor1;
            -webkit-line-clamp:3;
            -webkit-box-orient: vertical;
            overflow: hidden
        }
    }
    .more{
        width: 30%;
        border: 1px solid @allcolor1;
        color:@allcolor5;
        padding:10px;
        margin: 0 auto;
    }
}
.dtimg{
    background-color: @allcolor1;
    width: 100%;
    height:100%;
    color:white;
    font-size: 0.5rem;
    line-height: 1.2rem;
}
.plhuifu{
    margin-top: 10px;
    padding:5px;
    font-size: 0.35rem;
    border-radius: 4px;
    background-color: rgba(238, 238, 238, 0.664);
    span{
        display:inline-block;
        margin-right: 5px;
        margin-left: 5px;
        font-size: 0.38rem;
        color:@allcolor5;
        &:last-child{
            color:black;
        }
    }
}
.downc{
    position: fixed;
    bottom: 0px;
    width: 100%;
    height:50px;
    display:flex;
    border-top:1px solid @allcolor3;
    z-index:100;
    .downleft{
        width: 50%;
        height:100%;
        line-height: 50px;
        background-color: white;
    }   
    .downright{
        width: 50%;
        height:100%;
        line-height: 50px;
        background-color: @allcolor2;
        color:white;
    }
}
.yy{
    position: fixed;
    top: 50%;
    padding: 10px;
    background-color: @allcolor3;
    left: 50%;
    transform: translate(-50%, -50%);
    color: @allcolor2;
    border-radius: 5px;
}
.jiazai{
    width: 100%;
    height:600px !important;
    position: absolute;
    top:0px;
    left:0px;
}
.hfnr{
    display:inline;
    margin: 0;
    word-wrap: break-word;
    word-break: normal;
}
.meiyou{
    color:@allcolor2;
    font-size:0.5rem;
}
</style>